<template>
  <view class="flex">
    <view class="w-240rpx shrink-0 bg-#f6f6f6 h-800rpx overflow-x-auto">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="h-102rpx flex items-center justify-center text-28rpx color-#1d2129"
        :class="{ 'color-#1F50F2': selectValue[0].code === item.code }"
        @tap="geiSheng(item, index)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="h-800rpx min-h-0 flex-1 overflow-x-auto">
      <view
        v-for="(item, index) in list[activeIndex].children"
        :key="index"
        class="h-102rpx flex items-center pl-62rpx text-28rpx color-#1d2129"
        :class="{ 'color-#1F50F2': selectValue[1].code === item.code }"
        @tap="getiShi(item)"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import {userJobType} from ''

type List = { name: any; children: { name: any }[] }[];
const props = defineProps({
  type: String,
  list: Array
});
const emit = defineEmits(['getSearchList'])
const activeIndex = ref(0);
const selectValue = ref([{
  label: '',
  code: ''
},{
  label: '',
  code: ''
}])
const geiSheng = (item: any, index: number) => {
  activeIndex.value = index;
  selectValue.value[0] = {
    label: item.name,
    code: item.code
  };
  selectValue.value[1] = {
    label: '',
    code: ''
  }
  if(item.children < 1) {
    emit('getSearchList', {value: selectValue.value, type: props.type == 1 ? 'city' : 'zhiye'})
  }
};
const getiShi = (item: any) => {
  selectValue.value[1] = {
    label: item.name,
    code: item.code
  };
  emit('getSearchList', {value: selectValue.value, type: props.type == 1 ? 'city' : 'zhiye'})
};
</script>

<style scoped lang="scss"></style>
